import {forwardRef, useImperativeHandle, useRef} from 'react'

type MyInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
  label: string
}

function MyInput(props: MyInputProps, ref: any) {
  const {label, ...other} = props
  const inputRef = useRef<any>(null)

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus()
      }
    }
  }, [])

  return (
    <label>
      {label}
      <input {...other} ref={inputRef} />
    </label>
  )
}

export default forwardRef(MyInput)